<html layout:decorate="~{diagnostic/diagnostic_layout}" xmlns:layout="http://www.w3.org/1999/xhtml">
<body>
    <div layout:fragment="content_diagnostic">
        <div class="search_condition_block">
            <div style="margin-top: 5px">
                <label style="width: 80px;margin-left: 15px">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间:</label>
                <div id="time" class="btn-group btn-group-sm" role="group" aria-label="...">
                    <button type="button" class="btn btn-success active">今天</button>
                    <button type="button" class="btn btn-success">昨天</button>
                    <button type="button" class="btn btn-success">本周</button>
                    <button type="button" class="btn btn-success">本月</button>
                    <button type="button" class="btn btn-success">自定义</button>
                </div>
                <input type="text" class="search-data-child" name="name" placeholder="" >
                <button type="button" id="search-btn" class="btn btn-primary btn-sm" style="margin-left: 10px">搜索</button>
            </div>

            <div style="margin-top: 5px;display: flex;">
                <input type="text" class="search-data-child" name="name" placeholder="搜索设备、算法名称" style="margin-left: 10px">
                <div style="margin-top: 5px;">
                    <label style="width: 80px;margin-left: 15px">筛选条件:</label>
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox1" value="option1"> 触发报警
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox2" value="option2"> 修改BMS报警阈值
                    </label>
                </div>
            </div>
        </div>

        <div class="main-body">
            <table id="dataTable" data-url="/diagnostic/diagnostic_data" data-page-list=[]  data-striped="true" data-pagination="true" data-page-size="15" data-cache="false">

            </table>
        </div>

        <style>
            .btn-group-sm .active{
                background-color: #006dcc!important;
                border-color: #006dcc!important;
            }
        </style>
        <script>

            $('#time button').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
            });

            //table字段
            var dataFormat = [{
                field:'id',
                title:'id',
                visible:false
            },{
                field: 'diagnosticTime',
                title: '诊断时间',
                align: 'center',
                formatter:function(value,row,index){
                    return formatTimeStrap(value);
                }
            },{
                field: 'diagnosticEquipment',
                title: '诊断设备',
                align: 'center'
            },{
                field: 'arithmetic',
                title: '诊断算法',
                align: 'center'
            },{
                field: 'diagnosticResult',
                align: 'center',
                title: '诊断结果'
            },{
                field: 'alarmStatus',
                align: 'center',
                title: '是否触发报警',
                formatter : formatAlarmStatus
            },{
                field: 'thresholdStatus',
                align: 'center',
                title: '是否建议修改报警阈值',
                formatter :formatThresholdStatus
            }];

            //报警状态
            function formatAlarmStatus(value, row, index) {
                var html = '';
                if (value == 1) {
                    html += '<input type="checkbox">'
                }

                if (value == 2) {
                    html += '<input type="checkbox" checked="checked">'
                }

                html +=  '<a  href="/alarm/alarm_list">详细</a>';
                return [html].join('');
            }

            //报警阈值
            function formatThresholdStatus(value, row, index) {

                var html = '';
                if (value == 1) {
                    html += '<input type="checkbox">'
                }

                if (value == 2) {
                    html += '<input type="checkbox" checked="checked">'
                }

                html +=  '<a  href="/alarm/threshold_manager">详细</a>';
                return [html].join('');
            }

            //初始化table
            window.onload = function () {
                getTable(dataFormat, "dataTable");
            };
        </script>
    </div>
</body>
</html>